<template>
  <ToolboxWindow
    title="图表设置"
    :show="config.showConfig"
    @close="config.showConfig = false"
  >
    <el-form size="small">
      <el-form-item label="图表宽度">
        <el-select v-model="config.chartSize" @change="chartRefresh">
          <!-- <el-option :value="48" label="紧缩"></el-option> -->
          <el-option :value="60" label="较窄"></el-option>
          <el-option :value="80" label="适中"></el-option>
          <el-option :value="100" label="加宽"></el-option>
          <!-- <el-option :value="188" label="极宽"></el-option> -->
        </el-select>
      </el-form-item>
      <el-form-item label="图表类型">
        <el-select v-model="config.chartType" @change="handleTypeChange">
          <el-option value="bar" label="柱状图"></el-option>
          <el-option value="line" label="折线图"></el-option>
          <el-option value="scatter" label="散点图"></el-option>
          <el-option value="effectScatter" label="散点图+"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="时间粒度">
        <el-radio-group
          v-model="config.dataGranularity"
          @change="handleGranularityChange"
        >
          <!-- <el-radio-button :value="1">15分钟</el-radio-button> -->
          <el-radio-button :value="2">30分钟</el-radio-button>
          <el-radio-button :value="4">60分钟</el-radio-button>
          <el-radio-button :value="5">60'BKB</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="刻度间隔">
        <el-radio-group
          v-model="config.dataInterval"
          @change="handleIntervalChange"
        >
          <el-radio-button :value="1">15分钟</el-radio-button>
          <el-radio-button :value="2">30分钟</el-radio-button>
          <el-radio-button :value="4">60分钟</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="统计步长">
        <el-radio-group v-model="config.dataStep" @change="handleStepChange">
          <el-radio-button :value="1">15分钟</el-radio-button>
          <el-radio-button :value="2">30分钟</el-radio-button>
          <el-radio-button :value="4">60分钟</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="内容设置">
        <el-checkbox v-model="config.showTotal">显示合计</el-checkbox>
        <el-checkbox v-model="config.showTotalLine">显示合计折线</el-checkbox>
        <el-checkbox v-model="config.showSector">显示扇区建议</el-checkbox>
        <el-checkbox v-model="config.showSectorLine"
          >显示扇区建议折线</el-checkbox
        >
        <span
          v-show="config.dataInterval != 4"
          style="
            padding-top: 6px;
            line-height: 14px;
            color: var(--el-color-warning);
          "
          >*统计步长小于60分钟时默认不显示扇区建议</span
        >
      </el-form-item>
      <el-form-item label="绘图设置">
        <el-checkbox v-model="config.chartStack">内容堆叠显示</el-checkbox>
        <el-checkbox v-model="config.chartEmphasis">鼠标悬停时高亮</el-checkbox>
        <el-checkbox v-model="config.chartFill">折线填充</el-checkbox>
        <el-checkbox v-model="config.chartSmooth">折线平滑</el-checkbox>
      </el-form-item>
      <el-form-item label="坐标转换">
        <el-radio-group v-model="config.chartPolar" @change="chartRefresh">
          <el-radio-button :value="false">笛卡尔坐标系</el-radio-button>
          <el-radio-button :value="true">极坐标系</el-radio-button>
        </el-radio-group>
      </el-form-item>
    </el-form>
  </ToolboxWindow>
</template>

<script setup>
import ToolboxWindow from "@/components/ToolboxWindow";
import useFlowStore from "@/store/flow.js";
const flowStore = useFlowStore();
const config = flowStore.chartConfig.gnenralChart;
const emits = defineEmits([
  "chartRefresh",
  "handleGranularityChange",
  "handleIntervalChange",
  "handleStepChange",
  "handleTypeChange",
]);
const chartRefresh = () => {
  emits("chartRefresh");
};
const handleGranularityChange = () => {
  emits("handleGranularityChange");
};
const handleIntervalChange = () => {
  emits("handleIntervalChange");
};
const handleStepChange = () => {
  emits("handleStepChange");
};
const handleTypeChange = () => {
  emits("handleTypeChange");
};
</script>
